<template>
    <el-row :gutter="2" style="min-width: 300px;">
        <el-col :span="12">
            <el-date-picker type="date"  v-if="!disabled && allowEditDate" :editable="false" style="width: 100% !important;" prefix-icon="" :readonly="disabled" :disabled="disabled" v-model="dt1"></el-date-picker>
            <el-input v-if="disabled || !allowEditDate" disabled :model-value="dt1" style="width: 100% !important;" />
        </el-col>
        <el-col :span="6">
            <el-select v-model="dt2" :disabled="disabled" style="width:100%" >
                <el-option v-for="item in hh" :key="item" :value="item" :label="item"></el-option>
            </el-select>
        </el-col>
        <el-col :span="6">
            <!-- <el-select v-model="dt3" :disabled="disabled" style="width:100%" clearable @clear="clearTime">
                <el-option v-for="item in mm" :key="item" :value="item" :label="item"></el-option>
            </el-select> -->
            <el-input type="number" readonly v-model="dt3" :min="0" :max="59" @click="showSelectMM" :disabled="disabled" style="width:100%">
                <template #suffix>
                    <el-icon @click="showSelectMM"><ArrowDown /></el-icon>
                </template>
            </el-input>
            <my-dialog v-model="dlgVisible" title="选择分钟" width="400px">
                <el-space wrap>
                    <el-button :type="item==dt3?'primary':''" style="width: 19%;"  v-for="item in mm" :key="item" @click="closeDlg(item)">{{ item  }}</el-button>
                </el-space>
            </my-dialog>
        </el-col>
    </el-row>
</template>

<script>
export default {
    name: "MyDateTime3",
}
</script>

<script setup>
import { ref, watch } from "vue";
import mydate from "./mydate";

function makeArray(start, end, step) {
    let arr = [];
    for (let ix = start; ix <= end; ix += step) {
        arr.push(ix);
    }
    return arr;
}

const props = defineProps({
    modelValue: [Date, String],
    disabled: Boolean,
    minutsStep: {
        type: Number,
        default: 1
    },
    allowEditDate:{
        type:Boolean,
        default:true
    },
});

const emit = defineEmits(["update:modelValue"]);

const hh = makeArray(0, 23, 1);
const mm = makeArray(0, 59, props.minutsStep);
const dt1 = ref('');
const dt2 = ref('');
const dt3 = ref('');
const isSetting = ref(false);
const dlgVisible = ref(false);

function clearTime(){
    emit("update:modelValue", null);
}

function setDt() {
    isSetting.value = true;

    if (props.modelValue) {
        //ios 不支持  YYYY-MM-DD hh:mm:ss 这样的日期格式
        let dt = mydate.parseDate(props.modelValue);
        dt1.value = dt.format("yyyy-MM-dd");
        dt2.value = dt.getHours();
        let newMinu = Math.floor(dt.getMinutes() / props.minutsStep) * props.minutsStep;
        dt3.value = newMinu;
        isSetting.value = false;
        if(newMinu!=dt.getMinutes()){
            updateDT();
        }
    } else {
        dt1.value = null;
        dt2.value = null;
        dt3.value = null;
        isSetting.value = false;
    }

}

function updateDT() {
    if (!isSetting.value) {
        let dt = null;
        if (!dt1.value) {
            dt1.value = new Date();
        }
        if (dt1.value) {
            dt = mydate.parseDate(dt1.value);

            dt = new Date(
                dt.getFullYear(),
                dt.getMonth(),
                dt.getDate(),
                dt2.value,
                dt3.value,
                0
            );
        }

        emit("update:modelValue", dt);
    }
};

function showSelectMM(){
    if(!props.disabled){
        dlgVisible.value = true;
    }
}

function closeDlg(item){
    dt3.value = item;
    dlgVisible.value = false;
}

setDt();

watch(() => props.modelValue, () => {
    setDt();
});

watch([dt1, dt2, dt3], (val) => {
    updateDT();
});
</script>
